<template>
  <w-modal title="意见反馈" ref="WModal" @ok="okBtnClick">
    <a-form
      :form="form"
      :label-col="{ span: 3 }"
      :wrapper-col="{ span: 19 }"
    >
      <a-form-item label="名称">
        {{ OAuth.name }}
      </a-form-item>
      <a-form-item label="头像">
        <img :src="OAuth.icon" width="100px" />
      </a-form-item>
      <a-form-item label="手机">
        <a-input v-decorator="['phone']" placeholder="请输入手机号" />
      </a-form-item>
      <a-form-item label="QQ">
        <a-input v-decorator="['qq']" placeholder="请输入QQ号" />
      </a-form-item>
      <a-form-item label="微信">
        <a-input v-decorator="['wx']" placeholder="请输入微信" />
      </a-form-item>
      <a-form-item label="反馈内容">
        <a-input
          v-decorator="['content', { rules: [{ required: true, message: '请输入反馈内容' }] }]"
          type="textarea"
          placeholder="反馈内容..."
        />
      </a-form-item>
      <a-form-item label="是否显示">
        <a-switch v-model="isShow" />
      </a-form-item>
    </a-form>
  </w-modal>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import WModal, { ModalComType } from '@/components/global/modal'
import { State } from 'vuex-class'
import { Api } from '@/config/api'
import { WrappedFormUtils } from 'ant-design-vue/types/form/form'


@Component({
  name: 'ComWebMeFeedback',
  components: {
    WModal
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: 'ComWebMeFeedback' })
    }
  }
})
export default class ComWebMeFeedback extends Vue {
  @State('oauth') OAuth:any

  // 是否显示在意见反馈列表
  isShow = true
  form!: WrappedFormUtils

  /**
   * 显示
   */
  show () {
    if (this.OAuth.name) {
      (this.$refs.WModal as ModalComType).show()
    } else {
      this.$confirm({
        title: '提示',
        content: '请先登录',
        onOk: () => {
          this.$router.push('/OAuth')
        }
      })
    }
  }

  /**
   * 意见反馈提交
   */
  okBtnClick () {
    (this.$refs.WModal as ModalComType).showLoading()
    this.form.validateFields((err, values) => {
      if (!err) {
        const p = {
          name: this.OAuth.name,
          icon: this.OAuth.icon,
          isShow: this.isShow,
          ...values
        }
        this.$wAxios
          .$post(Api.feedback.add, p)
          .then(() => {
            this.$message.success('提交成功');
            (this.$refs.WModal as ModalComType).close()
          }).finally(() => {
            (this.$refs.WModal as ModalComType).hideLoading()
          })
      } else {
        (this.$refs.WModal as ModalComType).hideLoading()
      }
    })
  }
}
</script>

<style scoped></style>
